<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div>填写订单2</div>
      </div>
    </van-sticky>
    <div class="body">
      <div
          class="address-item"
          v-if="addressList.length > 0"
          v-for="(item, index) in addressList"
          :key="index"
          @click="gotoEditAddress()"
      >
        <div class="title">{{ item.areaName }}</div>
        <div class="address">
          <div>{{ item.address }}</div>
          <img :src="edit"/>
        </div>
        <div class="bottom">
          <span class="name">{{ item.name }}</span>
          <span class="tel">{{ item.phone }}</span>
          <div class="mrbtn" v-if="item.isDefault === 0">默认</div>
        </div>
      </div>
      <div
          class="address-item"
          v-if="addressList.length == 0"
          @click="gotoEditAddress()"
      >
        <div class="address">
          <div
              style="
              font-size: 17px;
              font-weight: 400;
              color: rgba(199, 199, 199, 1);
              text-align: left;
            "
          >
            请选择收货地址
          </div>
          <img :src="edit"/>
        </div>
      </div>
    </div>
    <div class="body" style="margin-top: 12px">
      <div class="content-desc">
        <img :src="store.state.imgUrl + chooseGg.picture"/>
        <div class="content-desc-r">
          <div class="desc">{{ chooseGg.goodName }}</div>
          <div class="desc-second">
            {{ Object.values(JSON.parse(chooseGg.sku)).join("/") }}
          </div>
          <div class="content-desc-price">
            <div class="sj"><span>￥</span>{{ chooseGg.price }}</div>
            <!--            <div class="yj">原价：￥399.00</div>-->
            <div class="add-reduce">
              <!--              <img :src="reduce" @click="reduceFun"/>-->
              <!--              <div class="num">{{ num }}</div>-->
              <!--              <img :src="add" @click="addFun"/>-->

              <img :src="reduce" @click="reduceFun" v-if="num > 1"/>
              <img :src="reduceZh" @click="reduceZhFun" v-if="num <= 1"/>
              <div class="num">{{ num }}</div>
              <img :src="add" @click="addFun" v-if="num < 10"/>
              <img :src="addZh" @click="addZhFun" v-if="num >= 10"/>
            </div>
          </div>
        </div>
      </div>
      <van-cell title="配送" value="快递运费" class="custom-cell-item"/>
      <van-field
          class="custom-field"
          v-model="note"
          label="订单留言"
          placeholder="建议留言前先于商家沟通确认"
          input-align="right"
      />
    </div>
    <div class="body" style="margin-top: 12px">
      <van-cell title="商品金额" :value="`￥${num * chooseGg.price}`"/>
      <van-cell title="运费" :value="`￥${freight}`"/>
      <van-cell title="" :value="`合计：￥${num * chooseGg.price + freight}`"/>
    </div>
    <div
        class="zf body"
        style="margin-top: 12px; padding-top: 20px; padding-bottom: 20px"
    >
      <div style="display: flex; align-items: center">
        <img src="@/assets/shopping/wx.png" style="width: 30px; height: 26px"/>
        <div style="margin-left: 5px">微信支付</div>
      </div>
      <img
          src="@/assets/shopping/choose.png"
          style="width: 15px; height: 15px"
      />
    </div>
    <div class="footer">
      <div class="price">
        <span>￥</span>{{ num * chooseGg.price + freight }}
      </div>
      <div class="submit" @click="submit">提交订单</div>
    </div>
    <!--    <van-dialog class="dialog" v-model="dialogVisible" title="请确认微信支付状态是否已完成" :show-cancel-button="false"-->
    <!--                :show-confirm-button="false">-->
    <!--      <div class="dialog_main">-->
    <!--        <div class="btn">-->
    <!--          <div class="btn_r" @click="handlePayment('completed')">已完成支付</div>-->
    <!--          <div class="btn_l" @click="handlePayment('incomplete')">支付遇到问题,重新支付</div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </van-dialog>-->
  </div>
</template>

<script>
import {mapState} from "vuex";
import store from "../../../store";
import {queryAddress} from "../../../api/my";
import {createOrder, freightCalculate, pay} from "../../../api/shopping";
import axios from "axios";
import {query} from "@/api/util";
// import { urlencode } from 'your-url-encoding-library';
export default {
  name: "index",
  data() {
    return {
      dialogVisible: false,
      store: store,
      add: require("@/assets/shopping/add.png"),
      reduce: require("@/assets/shopping/reduce.png"),
      kf: require("@/assets/my/lxkf.png"),
      back: require("@/assets/my/back.png"),
      edit: require("@/assets/shopping/back-right.png"),
      reduceZh: require("@/assets/shopping/reduceZh.png"),
      addZh: require("@/assets/shopping/addZh.png"),
      addressList: [],
      note: "",
      freight: 0,
      addressId: "",
      submitTitle: '提交订单'
    };
  },
  computed: {
    ...mapState("shopping", ["chooseGg", "num"]),
  },
  async mounted() {
    if (this.$route.query.addressId) {
      console.log("addressId", this.$route.query.addressId);
      this.addressId = this.$route.query.addressId;
    }
    await this.queryAddress();
  },
  methods: {
    handlePayment(state) {
      if (state == 'completed') {
        //已支付完成 跳转到 该订单的详情页
        this.$router.push({path: '/orderDetail', query: {id: id}})
      } else {
        //否则的话 跳转到 继续支付页
        this.$router.push({path: '/payStatus', query: {id: id}})
      }
    },
    cacleFreight() {
      if (this.chooseGg.id && this.addressList.length > 0) {
        let data = {
          id: this.chooseGg.goodId,
          area: this.addressList[0].area,
        };
        return new Promise((resolve, reject) => {
          freightCalculate(data).then((res) => {
            this.freight = res.data;
            console.log("打印运费", this.freight);
          });
        });
      } else {
        this.freight = 0;
      }
    },
    gotoEditAddress() {
      this.$router.push({
        path: "/addressManagement",
        query: {from: "writeOrder"},
      });
    },
    queryAddress() {
      console.log("----", queryAddress);
      return new Promise((resolve, reject) => {
        let data = {
          whether: 1,
          id: this.addressId,
        };
        queryAddress(data).then((res) => {
          this.addressList = res.data;
          console.log("000", this.addressList.length);
          this.cacleFreight(); //获取运费接口
        });
      });
    },
    changeAddress() {
      this.$toast("修改地址需要和flutter联调");
    },
    handleBack() {
      // this.$router.go(-1);
      this.$router.push({path: "/detail"});
    },
    reduceFun() {
      if (this.num > 1) {
        this.$store.commit("shopping/SET_NUM_REDUCE");
      }
    },
    reduceZhFun() {
      this.$toast("不能再减了");
    },
    addFun() {
      if (this.num < 10) {
        this.$store.commit("shopping/SET_NUM_ADD");
      }
    },
    addZhFun() {
      this.$toast("最多购买10个");
    },
    // reduceFun() {
    //   this.$store.commit('shopping/SET_NUM_REDUCE')
    // },
    // addFun() {
    //   this.$store.commit('shopping/SET_NUM_ADD')
    // },
    submit() {
      if (this.addressList.length <= 0) {
        this.$toast("地址及联系人信息不能为空");
        return;
      }
      //走H5支付的逻辑 -调接口-跳转支付页面
      let data = {
        price: this.num * this.chooseGg.price, //价格
        freight: this.freight, //运费
        payStyle: 0, //支付方式  0：微信 1：支付宝
        currency: 0, //币种 0: CNY  1:USA
        skuId: this.chooseGg.id, //skuid
        goodId: this.chooseGg.goodId,
        num: this.num, //购买数量
        addressId: this.addressList[0].id, //收获地址的id  ---后期可能会改
        note: this.note, //备注
        mobileType: "2", //手机类型 0: IOS 1:Android 2:Wap
      };
      console.log("submit params", data);
      createOrder(data)
          .then((res) => {
            if (res.code == 0) {
              //调用支付
              // axios.get(res.data.payParams.h5_url, {
              //   headers: {
              //     'lidaidi': 'wechat.yasee.com.cn'
              //   }
              // })
              // return
              if (res.data.payParams) {
                //弹框弹起 文字修改
                // this.dialogVisible = true
                // this.submitTitle = '正在支付请稍后'
                // this.$toast('给App发送消息')
                // 提交订单成功 并给App发送消息 唤起支付
                // this.$router.push({path: '/payLoading', query: {url: res.data.payParams.h5_url}})

                let payLoading = `https://debug.yasee.com.cn:9035/#/payLoading?wechatUrl=${encodeURIComponent(
                    res.data.payParams.h5_url
                )}`;
                let message = {
                  action: "payJump",
                  param: payLoading,
                };
                getInfoFromVue.postMessage(JSON.stringify(message));
              } else {
                this.$toast(res.data.msg || "提交订单失败");
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  background: rgba(242, 242, 242, 1);
  padding-bottom: 100px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .zf {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .body {
    padding: 0px 15px;
    background: #ffffff;

    /deep/ .van-cell {
      padding: 10px 0px;
    }

    .address-item {
      padding: 10px 10px 10px;
      //border-bottom: 0.5px solid rgba(229, 229, 229, 1);

      .title {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(84, 84, 84, 1);
        text-align: left;
        vertical-align: top;
      }

      .address {
        margin-top: 3px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > div {
          width: 80%;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0;
          line-height: 24.62px;
          color: rgba(0, 0, 0, 1);
          text-align: left;
          vertical-align: top;
        }

        > img {
          width: 10px;
          height: 16px;
          opacity: 1;
          //transform: rotate(45deg);
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 3px;

        .name {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24.62px;
          color: rgba(84, 84, 84, 1);
        }

        .tel {
          margin-left: 5px;
          font-size: 17px;
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(199, 199, 199, 1);
        }

        .mrbtn {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 19px;
          color: rgba(255, 255, 255, 1);
          width: 37px;
          height: 19px;
          opacity: 1;
          border-radius: 3px;
          background: rgba(242, 150, 0, 1);
          text-align: center;
          margin-left: 5px;
        }
      }
    }

    .content-desc {
      padding: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      //border-bottom: 0.5px solid rgba(229, 229, 229, 1);
      > img {
        width: 118px;
        height: 118px;
        border-radius: 5px;
      }

      .content-desc-r {
        margin-left: 12px;
        width: 200px;

        .desc {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(29, 22, 23, 1);
          text-overflow: ellipsis;
          overflow: hidden;
          //display: inline-block;
          white-space: nowrap;
          //width: 236px;
        }

        .desc-second {
          font-size: 15px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: rgba(199, 199, 199, 1);
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block;
          //white-space: nowrap;
          //width: 236px;
        }

        .content-desc-price {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .sj {
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 40.54px;
            color: rgba(255, 0, 0, 1);

            > span {
              font-size: 16px;
              font-weight: 500;
            }
          }

          .add-reduce {
            display: flex;
            justify-content: center;
            align-items: center;

            .num {
              padding: 0px 17px;
            }

            > img {
              width: 15px;
              height: 15px;
            }
          }

          .yj {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 20.27px;
            color: rgba(166, 166, 166, 1);
            text-align: center;
            vertical-align: top;
          }
        }
      }
    }

    .custom-cell-item,
    .custom-field /deep/ .van-field__control {
      border: none;
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    //margin-top: 50px;
    height: 60px;
    line-height: 60px;
    position: fixed;
    bottom: 0;

    .price {
      width: 40%;
      background: rgba(255, 255, 255, 1);
      font-size: 34.77px;
      font-weight: 500;
      color: rgba(255, 0, 0, 1);
      text-align: center;

      > span {
        font-size: 19.87px;
        font-weight: 500;
        color: rgba(255, 0, 0, 1);
      }
    }

    .submit {
      width: 60%;
      opacity: 1;
      background: rgba(242, 150, 0, 1);
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.3px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }

  .dialog {
    height: 200px;
    background: linear-gradient(180deg, rgb(240 202 140) 0%, rgba(255, 255, 255, 1) 40%);
    font-size: 20px;

    .dialog_main {
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .btn {
      //display: flex;
      //justify-content: space-between;
      //padding: 18px 0;
      text-align: center;

      .btn_l {
        border: 1px solid #f29600;
        border-radius: 20px;
        color: #f29600;
        padding: 8px 30px;
      }

      .btn_r {
        background: #f29600;
        border: 1px solid #f29600;
        border-radius: 20px;
        color: #fff;
        padding: 8px 30px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
